<template>
  <div>
    <div>我是home 页</div>
    <p @click="addCount">count:{{ count }}</p>
    <!-- 遍历数组 -->
    <ul>
      <li v-for="(item, index) in nameArr" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="addperson">添加人物</button>

    <!-- 遍历数组 -- ref 响应式数组 -->
    <ul>
      <li v-for="(item, index) in girlArr" :key="index">{{ item }}</li>
    </ul>
    <button @click="addgirl">添加女孩</button>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
export default {
  name: "home",
  // 该种setup 写法属于选项式的setup,该语法是一种过渡语法 从 选项式api=>组合式api
  // 该种选项式setup有缺点: 在setup 中定义的变量和方法都需要return 出去, 才能在页面template中使用
  setup() {
    // 01: 定义一个响应式的数据 ,需要使用 ref 或reactive 这两个钩子函数
    // let count = 100;
    // function addcount() {
    //   console.log("事件");
    //   count++;
    //   console.log("count", count);
    // }
    // return {
    //   count,
    //   addcount,
    // };
    //02: 使用ref 和reactive
    // const 变量 = ref(初始值)  将初始值变成变响应式的数据
    const count = ref(100);
    // console.log("count", count); // ref响应式对象
    // console.log(count.value); //100

    const addCount = () => {
      count.value++;
    };

    //03: 将引用类型数据变成响应式数据
    const nameArr = reactive(["张三", "李四"]);
    console.log("nameArr", nameArr);
    const addperson = () => {
      nameArr.push("王五");
    };

    // 04:  使用ref 处理引用数据类型
    const girlArr = ref(["杨幂", "娜扎"]);
    console.log(girlArr);
    const addgirl = () => {
      girlArr.value.push("欧阳娜娜");
    };
    return {
      count,
      addCount,
      nameArr,
      addperson,
      girlArr,
      addgirl,
    };
  },
};
</script>
<style scoped>
</style>
